﻿<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>Media Gallery</title>

  <link href="css/style.css" rel="stylesheet">
  <link href="css/style-responsive.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>

        <div class="logo-icon text-center">
            <a href="index.html"><img src="images/logo_icon.png" alt=""></a>
        </div>
        <!--logo and iconic logo end-->

        <div class="left-side-inner">

            <!-- visible to small devices only -->
            <div class="visible-xs hidden-sm hidden-md hidden-lg">
                <div class="media logged-user">
                    <img alt="" src="images/photos/user-avatar.png" class="media-object">
                    <div class="media-body">
                        <h4><a href="#">John Doe</a></h4>
                    </div>
                </div>
            </div>

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="active"><a href="index.html"><i class="fa fa-home"></i> <span>首 页</span></a></li>
                <li class="menu-list"><a href="#"><i class="fa fa-users"></i> <span>技师排钟</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="#"> 排钟状况</a></li>
                        <li><a href="workers.html"> 技师信息</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-building"></i> <span>房间状况</span></a></li>
                <li><a href="login.html"><i class="fa fa-sign-in"></i> <span>注销登录</span></a></li>

            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

        <!--toggle button start-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>
        <!--toggle button end-->

        <!--notification menu start -->
        <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle">
                            <img src="images/photos/user-avatar.png" alt="John Doe" />
                            John Doe
                        </a>
                    </li>

                </ul>
            </div>
        <!--notification menu end -->

        </div>
        <!-- header section end-->


        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            技术信息
                        </header>
                        <div class="panel-body">

                            <ul id="filters" class="media-filter">
                                <li><a href="#" data-filter="*">所有技师</a></li>
                                <li><a href="#" data-filter=".boy">男技师</a></li>
                                <li><a href="#" data-filter=".girl">女技师</a></li>
                                <li><a href="#" data-filter=".on">在职技师</a></li>
                                <li><a href="#" data-filter=".leave">下班技师</a></li>
                            </ul>

                           
                            <div id="gallery" class="media-gal">
                                <div class="boy leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user1.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user1.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>B001 </p>
                                </div>
                                <div class="boy leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user1.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user1.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>B001 </p>
                                </div>
                                <div class="boy leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user1.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user1.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>B001 </p>
                                </div>
                                
                                <div class="boy leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user3.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user3.png" alt="" style="-webkit-filter: grayscale(100%);"  />
                                    </a>
                                    <p>B002 </p>
                                </div>
                                <div class="boy leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user3.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user3.png" alt="" style="-webkit-filter: grayscale(100%);"  />
                                    </a>
                                    <p>B002 </p>
                                </div>
                                <div class="boy leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user3.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user3.png" alt="" style="-webkit-filter: grayscale(100%);"  />
                                    </a>
                                    <p>B002 </p>
                                </div>
                                
                                <div class="boy on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user4.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user4.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">B003</p>
                                </div>
                                <div class="boy on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user4.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user4.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">B003</p>
                                </div>
                                <div class="boy on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user4.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user4.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">B003</p>
                                </div>
                                <div class="boy on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user4.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user4.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">B003</p>
                                </div>
                                
                                <div class="girl on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user2.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user2.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">G001 </p>
                                </div>
                                <div class="girl on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user2.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user2.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">G001 </p>
                                </div>
                                <div class="girl on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user2.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user2.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">G001 </p>
                                </div>
                                <div class="girl on item "  style="background: #65CEA7;">
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user2.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user2.png" alt="" />
                                    </a>
                                    <p style="color:#FFF">G001 </p>
                                </div>
                                
                                <div class="girl leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user5.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user5.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>G002 </p>
                                </div>
                                <div class="girl leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user5.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user5.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>G002 </p>
                                </div>
                                <div class="girl leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user5.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user5.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>G002 </p>
                                </div>
                                <div class="girl leave item " >
                                    <a onclick="javascript:document.getElementById('ModelImg').src='images/photos/user5.png';" href="#myModal" data-toggle="modal">
                                        <img src="images/photos/user5.png" alt=""  style="-webkit-filter: grayscale(100%);" />
                                    </a>
                                    <p>G002 </p>
                                </div>


                            </div>


                            <!-- Modal -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">Edit Media Gallery</h4>
                                        </div>

                                        <div class="modal-body row">

                                            <div class="col-md-5 img-modal">
                                                <img src="images/gallery/image1.jpg" id="ModelImg" alt="">
                                                <a href="#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> Edit Image</a>
                                                <a href="#" class="btn btn-white btn-sm"><i class="fa fa-eye"></i> View Full Size</a>

                                                <p class="mtop10"><strong>File Name:</strong> img01.jpg</p>
                                                <p><strong>File Type:</strong> jpg</p>
                                                <p><strong>Resolution:</strong> 300x200</p>
                                                <p><strong>Uploaded By:</strong> <a href="#">ThemeBucket</a></p>
                                            </div>
                                            <div class="col-md-7">
                                                <div class="form-group">
                                                    <label> Name</label>
                                                    <input id="name" value="img01.jpg" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label> Tittle Text</label>
                                                    <input id="title" value="awesome image" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label> Description</label>
                                                    <textarea rows="2" class="form-control"></textarea>
                                                </div>
                                                <div class="form-group">
                                                    <label> Link URL</label>
                                                    <input id="link" value="images/gallery/img01.jpg" class="form-control">
                                                </div>
                                                <div class="pull-right">
                                                    <button class="btn btn-danger btn-sm" type="button">Delete</button>
                                                    <button class="btn btn-success btn-sm" type="button">Save changes</button>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!-- modal -->

                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<script src="js/jquery.isotope.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(function () {
        var $container = $('#gallery');
        $container.isotope({
            itemSelector: '.item',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        // filter items when filter link is clicked
        $('#filters a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });
    });
</script>

</body>
</html>
